<template>
  <div  class="container">
     <div class="planm_title">
         <div>月份</div>
         <div>产品型号</div>
         <div>数量</div>
         <div>达成率</div>
         <div></div>
     </div>

      <div :style="{height:tableHeight+'px'}" class="overflow">
            <div class="planm_con" v-for="item of planMonthList" >
                <div class="planm_con_title">{{item.name}}</div>
                <div class="planm_con_item">
                    <div class="planm_con_pro" v-for="items of item.productPlanMonths">
                         <div>{{items.productName}}</div>
                         <div>{{items.productCount}}</div>
                         <div>{{items.finishedCount}}</div>
                    </div>              
                </div>
           </div>
      </div> 
  </div>
</template>

<script>
  export default {
    props:{
       planMonthList:{
        type:Array
       }
    },
    data() {
      return {


       }   
    },
    methods: {
      add(){
       
      }
    },
    computed: {
      tableHeight() {
        const filterHeight = 42
        var tableHeight = this.getTableHeight(filterHeight)
        return tableHeight;
      }
    },
    mounted (){

    }
  }
</script>
<style scoped>
.container{

}
.planm_title{
    width: 100%;
    height: 34px;
    display: flex;
    background: #409eff;
    border:1px solid #409eff;
    box-sizing: border-box;
}
.planm_title div:nth-child(-n+4){
     color:#fff;
     border-right: 1px solid #eee;
     height: 34px;
     flex:1; 
     text-align: center;
     line-height: 34px;
}
.planm_title div:last-child{
  background: #409eff;
  border:none;
  flex-basis: 17px;
}
.overflow{
     overflow: auto;
     border-bottom: 1px solid #409eff;
     border-left: 1px solid #409eff;
}
.planm_con{
    width: 100%;
    display: flex;
    background: #fff;
    box-sizing: border-box;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
}
.planm_con_title{
    flex:1; 
    display: flex;
    justify-content: center;
    align-items: center;
    border-right:1px solid #eee;
}
.planm_con_item{
   flex:3;
   line-height: 34px;
}
.planm_con_pro{
  display: flex;
}
.planm_con_pro div{
  flex:1;
  text-align: center;
  border-right: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
.planm_con_pro:last-child div{
  border-bottom: none;
}
.planm_con_pro div:last-child {
  border-right: none;
}
</style>